<input type="{{inputType}}" value="abc">
<button (click)="changeInputType()">change~</button>
<br/>
<br/>
<br/>
<input type="{{inputType1}}" value="abcd">
<button (click)="changeInputType1()">Change</button>
<br/>
<br/>
<br/>
<button (click)="clicknumber()">{{number}}</button>
<div >
  <ul>
    <li *ngFor="let customer of customers">{{customer}}</li>
  </ul>
</div>
<p>The sum of 1+1 is {{1+1}}</p>
<p>{{2*2}}</p>
<p>{{getVal()+1+2}}</p>
<h3>Current customer:{{currentCustomer}}</h3>
<p>{{title}}</p>
<div><img src="{{itemImageUrl}}" alt=""></div>
<article nz-typography>
  <h1 nz-typography>Introduction</h1>
  <p nz-typography>
    In the process of internal desktop applications development, many different design specs and
    implementations would be involved, which might cause designers and developers difficulties and
    duplication and reduce the efficiency of development.
  </p>
  <p nz-typography>
    After massive project practice and summaries, Ant Design, a design language for
    backgroundapplications, is refined by Ant UED Team, which aims to
    <span nz-typography>
      <strong
        >uniform the user interface specs for internal background projects, lower the unnecessary
        cost of design differences and implementation and liberate the resources ofdesign and
        front-end development .</strong
      >
    </span>
  </p>
  <h2 nz-typography>Guidelines and Resources</h2>
  <p nz-typrgraphy>
    We supply a series of design principles, practical patterns and high quality design resources (
    <span nz-typergraphy><code>Sketch</code></span
    >and<span nz-typography><code>Axure</code></span
    >), to help people create their product prototypes beautifully and efficiently.
  </p>
  <div nz-typography>
    <ul>
      <li>
        <a href="https://ng.ant.design/docs/spec/proximity">Principles</a>
      </li>
      <li>
        <a href="https://ng.ant.design/docs/pattern/navigation">Patterns</a>
      </li>
      <li>
        <a href="https://ng.ant.design/docs/resource/download">Resources Download</a>
      </li>
    </ul>
  </div>
  <p nz-typography>
    Press <span nz-typogrphy><kbd>Esc</kbd></span> to exist...
  </p>
</article>
<nz-divider></nz-divider>
<article nz-typrgraphy>
  <h1 nz-typography>介绍</h1>
  <p nz-typography>
    蚂蚁的企业级产品是一个庞大且复杂的体系。这类产品不仅量级巨大且功能复杂，而且变动和并发频繁，常常需要设计与开发能够快速的做出响应。
    同时这类产品中有存在很多类似的页面以及组件，可以通过抽象得到一些稳定且高复用性的内容。
  </p>
  <p nz-typography>
    随着商业化的趋势，越来越多的企业级产品对更好的用户体验有了进一步的要求。带着这样的一个终极目标，我们（蚂蚁金服体验技术部）
    经过大量的项目实践和总结，逐步打磨出一个服务于企业级产品的设计体系 Ant Design。 基于<span
      nz-typograpy
      ><mark>『确定』和『自然』</mark></span
    >的设计价值观，通过模块化的解决方案，降低冗余的生产成本， 让设计者专注于<span nz-typography
      ><strong>更好的用户体验 </strong></span
    >。
  </p>
  <h2 nz-typography>设计资源</h2>
  <p nz-typography>
    我们提供完善的设计原则、最佳实践和设计资源文件 （<span nz-typography><code>Sketch</code></span>
    和 <span nz-typography><code>Axure</code></span> ），来帮助业务快速设计出高质 量的产品原型。
  </p>
  <div nz-typography>
    <ul>
      <li>
        <a href="https://ng.ant.design/docs/spec/proximity">设计原则</a>
      </li>
      <li>
        <a href="https://ng.ant.design/docs/pattern/navigation">设计模式</a>
      </li>
      <li>
        <a href="https://ng.ant.design/docs/resource/download">设计资源</a>
      </li>
    </ul>
  </div>
  <p nz-typography>
    按<span nz-typography><kbd>Esc</kbd></span
    >键退出阅读……
  </p>
</article>
<article>
  <h1 nz-typography>h1.Ant Design</h1>
  <h2 nz-typography>h2.Ant Design</h2>
  <h3 nz-typography>h3.Ant Design</h3>
  <h4 nz-typography>h4.Ant Design</h4>
  <h5 nz-typography>h5.Ant Design</h5>
</article>
<p nz-typography nzEditable [(nzContent)]="editStr"></p>
<p
  nz-typography
  nzEditable
  nzEditIcon="highlight"
  nzEditTooltip="click to edit text"
  [(nzContent)]="customEditIconStr"
></p>
<p nz-typography nzEditable [nzEditTooltip]="null" [nzContent]="hideEditTooltipStr"></p>
<p nz-typography nzEditable nzCopyable [nzContent]="copyStr"></p>
<p nz-typography nzCopyable nzCopyText="Hello, Ant Design!">Replace copy text.</p>
<p
  nz-typography
  nzCopyable
  nzContent="Custom copy icons and tooltips text. "
  [nzCopyTooltips]="['click here', copedIcon]"
  [nzCopyIcons]="['meh', 'smile']"
></p>
<ng-template #copedIcon>
  <i nz-icon nzType="smile" nzTheme="fill"></i>
  you clicked!!
</ng-template>
<p nz-typography nzCopyable [nzContent]="copyHideTooltipStr" [nzCopyTooltips]="null"></p>

<span nz-typography>Ant Design(default)</span>
<span nz-typography nzType="secondary">Ant Design(secondary)</span>
<span nz-typography nzType="success">Ant Design(success)</span>
<span nz-typography nzType="warning">Ant Design(warning)</span>
<span nz-typography nzType="danger">Ant Design(danger)</span>
<span nz-typography nzDisabled>Ant Design(disabled)</span>
<span nz-typography>
  <mark>Ant Design(mark)</mark>
</span>
<span nz-typography>
  <code>Ant Design(code)</code>
</span>
<span nz-typography>
  <kbd>Ant Design(keyboard)</kbd>
</span>
<span nz-typography>
  <u>Ant Design(underline)</u>
</span>
<span nz-typography>
  <del>Ant Design(delete)</del>
</span>
<span nz-typography>
  <strong>Ant Design(strong)</strong>
</span>
<span nz-typography>
  <a href="https://ng.ant.design">Ant Design</a>
</span>
<div style="width: 30%">
  <p
    nz-typography
    nzEllipsis
    nzCopyable
    nzContent="Ant Design, a design language for background applications, is refined by Ant UED Team. Ant Design, a design language for background
applications, is refined by Ant UED Team. Ant Design, a design language for background applications, is refined by Ant UED Team. Ant
Design, a design language for background applications, is refined by Ant UED Team. Ant Design, a design language for background
applications, is refined by Ant UED Team. Ant Design"
  ></p>
  <p nz-typography nzEllipsis>
    Ant Design, a design language for background applications, is refined by Ant UED Team. Ant
    Design, a design language for background applications, is refined by Ant UED Team. Ant Design, a
    design language for background applications, is refined by Ant UED Team. Ant Design, a design
    language for background applications, is refined by Ant UED Team. Ant Design, a design language
    for background applications, is refined by Ant UED Team. Ant Design
  </p>
  <p nz-typography nzEllipsis nzExpandable [nzEllipsisRows]="3">
    Ant Design, a design language for background applications, is refined by Ant UED Team. Ant
    Design, a design language for background applications, is refined by Ant UED Team. Ant Design, a
    design language for background applications, is refined by Ant UED Team. Ant Design, a design
    language for background applications, is refined by Ant UED Team. Ant Design, a design language
    for background applications, is refined by Ant UED Team. Ant Design
  </p>
  <p
    nz-typography
    nzEditable
    nzEllipsis
    [nzEllipsisRows]="2"
    [nzContent]="dynamicContent"
    (nzContentChange)="onChange($event)"
  ></p>
  <nz-slider [(ngModel)]="rows" [nzMax]="10" [nzMin]="1"></nz-slider>
  <p
    nz-typography
    nzEllipsis
    nzExpandable
    [attr.title]="content + suffix"
    [nzEllipsisRows]="rows"
    [nzSuffix]="suffix"
    (nzOnEllipsis)="onEllipsisChange($event)"
  >
    {{ content }}
  </p>
</div>
<div style="width: 30%">
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista
    probare, quae sunt a te dicta? Refert tamen, quo modo.
  </p>
  <nz-divider></nz-divider>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista
    probare, quae sunt a te dicta? Refert tamen, quo modo.
  </p>
  <nz-divider nzText="With Text"></nz-divider>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista
    probare, quae sunt a te dicta? Refert tamen, quo modo.
  </p>
  <nz-divider nzDashed nzText="+ Add"></nz-divider>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista
    probare, quae sunt a te dicta? Refert tamen, quo modo.
  </p>
</div>
<br />
<div style="width: 30%">
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista
    probare, quae sunt a te dicta? Refert tamen, quo modo.
  </p>
  <nz-divider nzText="Text"></nz-divider>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista
    probare, quae sunt a te dicta? Refert tamen, quo modo.
  </p>
  <nz-divider nzText="Left Text" nzOrientation="left"></nz-divider>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista
    probare, quae sunt a te dicta? Refert tamen, quo modo.
  </p>
  <nz-divider nzText="Right Text" nzOrientation="right"></nz-divider>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista
    probare, quae sunt a te dicta? Refert tamen, quo modo.
  </p>
</div>
<br />
<div>
  Text
  <nz-divider nzType="vertical"></nz-divider>
  <a href="#">Link</a>
  <nz-divider nzType="vertical"></nz-divider>
  <a href="#">Link</a>
</div>
<div style="width: 30%">
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista
    probare, quae sunt a te dicta? Refert tamen, quo modo.
  </p>
  <nz-divider nzText="Text" nzPlain>Text</nz-divider>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista
    probare, quae sunt a te dicta? Refert tamen, quo modo.
  </p>
  <nz-divider nzText="Left Text" nzOrientation="left" nzPlain>Left Text</nz-divider>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista
    probare, quae sunt a te dicta? Refert tamen, quo modo.
  </p>
  <nz-divider nzText="Right Text" nzOrientation="right" nzPlain>Right Text</nz-divider>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista
    probare, quae sunt a te dicta? Refert tamen, quo modo.
  </p>
</div>
<div nz-row style="width: 30%">
  <div nz-col nzSpan="12" style="background: blue">col-12</div>
  <div nz-col nzSpan="12" style="background: green">col-12</div>
</div>
<div style="width: 30%" nz-row>
  <div nz-col nzSpan="8" style="background: blue">col-8</div>
  <div nz-col nzSpan="8" style="background: green">col-8</div>
  <div nz-col nzSpan="8" style="background: yellow">col-8</div>
</div>
<div nz-row style="width: 30%">
  <div nz-col nzSpan="6" style="background: blue">col-6</div>
  <div nz-col nzSpan="6" style="background: green">col-6</div>
  <div nz-col nzSpan="6" style="background: yellow">col-6</div>
  <div nz-col nzSpan="6" style="background: red">col-6</div>
</div>
<nz-divider nzText="Horizontal" nzOrientation="left"></nz-divider>
<div nz-row [nzGutter]="16" style="width: 30%">
  <div nz-col class="gutter-row" [nzSpan]="6">
    <div class="inner-box">col-6</div>
  </div>
  <div nz-col class="gutter-row" [nzSpan]="6">
    <div class="inner-box">col-6</div>
  </div>
  <div nz-col [nzSpan]="6" class="gutter-row">
    <div class="inner-box">col-6</div>
  </div>
  <div nz-col [nzSpan]="6" class="gutter-row">
    <div class="inner-box">col-6</div>
  </div>
</div>
<nz-divider nzText="Responsive" nzOrientation="left"></nz-divider>
<div nz-row [nzGutter]="{ xs: 8, sm: 16, md: 24, lg: 32, xl: 32, xxl: 32 }" style="width: 30%">
  <div nz-col class="gutter-row" [nzSpan]="6">
    <div class="inner-box">col-6</div>
  </div>
  <div nz-col class="gutter-row" [nzSpan]="6">
    <div class="inner-box">col-6</div>
  </div>
  <div nz-col class="gutter-row" [nzSpan]="6">
    <div class="inner-box">col-6</div>
  </div>
  <div nz-col class="gutter-row" [nzSpan]="6">
    <div class="inner-box">col-6</div>
  </div>
</div>
<nz-divider nzText="Vertical" nzOrientation="left"></nz-divider>
<div nz-row [nzGutter]="[16, 24]" style="width: 30%">
  <div nz-col class="gutter-row" [nzSpan]="6">
    <div class="inner-box">col-6</div>
  </div>
  <div nz-col class="gutter-row" [nzSpan]="6">
    <div class="inner-box">col-6</div>
  </div>
  <div nz-col class="gutter-row" [nzSpan]="6">
    <div class="inner-box">col-6</div>
  </div>
  <div nz-col class="gutter-row" [nzSpan]="6">
    <div class="inner-box">col-6</div>
  </div>
  <div nz-col class="gutter-row" [nzSpan]="6">
    <div class="inner-box">col-6</div>
  </div>
  <div nz-col class="gutter-row" [nzSpan]="6">
    <div class="inner-box">col-6</div>
  </div>
  <div nz-col class="gutter-row" [nzSpan]="6">
    <div class="inner-box">col-6</div>
  </div>
  <div nz-col class="gutter-row" [nzSpan]="6">
    <div class="inner-box">col-6</div>
  </div>
</div>
<br />
<br />
<br />
<div style="width: 30%" nz-row>
  <div nz-col [nzSpan]="8" style="background: rgb(255, 0, 0)">col-8</div>
  <div nz-col [nzSpan]="8" nzOffset="8" style="background: rgb(255, 0, 0)">col-8</div>
</div>
<div style="width: 30%" nz-row>
  <div nz-col [nzSpan]="6" nzOffset="6" style="background: rgb(255, 0, 0)">col-6 col-offset-6</div>
  <div nz-col [nzSpan]="6" nzOffset="6" style="background: rgb(255, 0, 0)">col-6 col-offset-6</div>
</div>
<div nz-row style="width: 30%">
  <div nz-col [nzSpan]="12" nzOffset="6" style="background: rgb(255, 0, 0)">
    col-12 col-offset-6
  </div>
</div>
<div nz-row style="width: 30%">
  <div nz-col [nzSpan]="18" [nzPush]="6" style="background: rgb(255, 0, 234)">
    col-18 col-push-6
  </div>
  <div nz-col [nzSpan]="6" [nzPull]="18" style="background: rgb(255, 0, 0)">col-6 col-pull-18</div>
</div>
<br />
<br />
<br />
<p>sub-element align left</p>
<div nz-row nzJustify="start" style="width: 30%">
  <div nz-col [nzSpan]="4" style="background: blue">col-4</div>
  <div nz-col [nzSpan]="4" style="background: green">col-4</div>
  <div nz-col [nzSpan]="4" style="background: yellow">col-4</div>
  <div nz-col [nzSpan]="4" style="background: red">col-4</div>
</div>
<br />
<p>sub-element align center</p>
<div nz-row nzJustify="center" style="width: 30%">
  <div nz-col [nzSpan]="4" style="background: blue">col-4</div>
  <div nz-col [nzSpan]="4" style="background: green">col-4</div>
  <div nz-col [nzSpan]="4" style="background: yellow">col-4</div>
  <div nz-col [nzSpan]="4" style="background: red">col-4</div>
</div>
<br />
<p>sub-element align right</p>
<div nz-row nzJustify="end" style="width: 30%">
  <div nz-col [nzSpan]="4" style="background: blue">col-4</div>
  <div nz-col [nzSpan]="4" style="background: green">col-4</div>
  <div nz-col [nzSpan]="4" style="background: yellow">col-4</div>
  <div nz-col [nzSpan]="4" style="background: red">col-4</div>
</div>
<br />
<p>sub-element monospaced arrangement</p>
<div nz-row nzJustify="space-between" style="width: 30%">
  <div nz-col [nzSpan]="4" style="background: blue">col-4</div>
  <div nz-col [nzSpan]="4" style="background: green">col-4</div>
  <div nz-col [nzSpan]="4" style="background: yellow">col-4</div>
  <div nz-col [nzSpan]="4" style="background: red">col-4</div>
</div>
<br />
<p>sub-element align full</p>
<div nz-row nzJustify="space-around" style="width: 30%">
  <div nz-col [nzSpan]="4" style="background: blue">col-4</div>
  <div nz-col [nzSpan]="4" style="background: green">col-4</div>
  <div nz-col [nzSpan]="4" style="background: yellow">col-4</div>
  <div nz-col [nzSpan]="4" style="background: red">col-4</div>
</div>
<br />
<br />
<br />
<p>Align Top</p>
<div nz-row nzJustify="center" nzAlign="top" style="width: 30%; height: 100px">
  <div nz-col [nzSpan]="4" style="background: blue">col-4</div>
  <div nz-col [nzSpan]="4" style="background: green">col-4</div>
  <div nz-col [nzSpan]="4" style="background: yellow">col-4</div>
  <div nz-col [nzSpan]="4" style="background: red">col-4</div>
</div>
<p>Align Center</p>
<div nz-row nzJustify="space-around" nzAlign="middle" style="width: 30%; height: 100px">
  <div nz-col [nzSpan]="4" style="background: blue">col-4</div>
  <div nz-col [nzSpan]="4" style="background: green">col-4</div>
  <div nz-col [nzSpan]="4" style="background: yellow">col-4</div>
  <div nz-col [nzSpan]="4" style="background: red">col-4</div>
</div>
<p>Align Bottom</p>
<div nz-row nzJustify="space-between" nzAlign="bottom" style="width: 30%; height: 100px">
  <div nz-col [nzSpan]="4" style="background: blue">col-4</div>
  <div nz-col [nzSpan]="4" style="background: green">col-4</div>
  <div nz-col [nzSpan]="4" style="background: yellow">col-4</div>
  <div nz-col [nzSpan]="4" style="background: red">col-4</div>
</div>
<br />
<br />
<br />
<div nz-row style="width: 30%">
  <div nz-col nzSpan="6" nzOrder="4" style="background: blue">1 col-order-4</div>
  <div nz-col nzSpan="6" nzOrder="3" style="background: green">2 col-order-3</div>
  <div nz-col nzSpan="6" nzOrder="2" style="background: yellow">3 col-order-2</div>
  <div nz-col nzSpan="6" nzOrder="1" style="background: red">4 col-order-1</div>
</div>
<br />
<br />
<br />
<p>Percentage columns</p>
<div nz-row style="width: 30%">
  <div nz-col nzFlex="2" style="background: blue">2/5</div>
  <div nz-col nzFlex="3" style="background:green">3/5</div>
</div>
<p>Fill rest</p>
<div nz-row style="width: 30%">
  <div nz-col nzFlex="100px" style="background:blue">100px</div>
  <div nz-col nzFlex="auto" style="background:green">Fill Rest</div>
</div>
<p>Raw flex style</p>
<div nz-row style="width: 30%">
  <div nz-col nzFlex="1 1 200px" style="background: blue">1 1 200px</div>
  <div nz-col nzFlex="0 1 300px" style="background: green">0 1 300px</div>
</div>
<br/>
<br/>
<br/>
<div nz-row>
  <div nz-col nzXs="2" nzSm="4" nzMd="6" nzLg="8" nzXl="10" style="background: blue">Col</div>
  <div nz-col nzXs="20" nzSm="16" nzMd="12" nLg="8" nzXl="4" style="background: green">Col</div>
  <div nz-col nzXs="2" nzSm="4" nzMd="6" nzLg="8" nzXl="10" style="background: yellow">Col</div>
</div>
<br/>
<input [(ngModel)]="currentItem">
<button (click)="showcurrentItem()">Show</button>
<div [hidden]="isSpecial">Show the class</div>
<div [hidden]="!isSpecial">Hide the class</div>
<div *ngIf="isSpecial">Hide the class1</div>
<div *ngIf="!isSpecial">Show the class1</div>
<div [ngSwitch]="currentDate">
  <div *ngSwitchCase="0">周日</div>
  <div *ngSwitchCase="1">周一</div>
  <div *ngSwitchCase="2">周二</div>
  <div *ngSwitchCase="3">周三</div>
  <div *ngSwitchCase="4">周四</div>
  <div *ngSwitchCase="5">周五</div>
  <div *ngSwitchDefault>周六</div>
</div>


<input type="number" [(ngModel)]=date>
<div [ngSwitch]="date">
  <div *ngSwitchCase="0">周日</div>
  <div *ngSwitchCase="1">周一</div>
  <div *ngSwitchCase="2">周二</div>
  <div *ngSwitchCase="3">周三</div>
  <div *ngSwitchCase="4">周四</div>
  <div *ngSwitchCase="5">周五</div>
  <div *ngSwitchCase="6">周六</div>
  <div *ngSwitchDefault>error</div>
</div>
<button (click)="datePlus()">加一</button>
<br/>
<input [(ngModel)]="item">
<button (click)="showitem()">Show</button>
<button (click)="clearitem()">Clear</button>
<div>
  <ul>
    <li *ngFor="let item of items">{{item}}</li>
  </ul>
</div>